<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref, watchEffect} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showSuccessToast, showFailToast} from 'vant';
import UserCardList from "../components/UserCardList.vue";
import type {UserType} from "../models/user";

const route = useRoute();

// const {tags} = route.query;

const userList = ref([])

const isMatchMode = ref<boolean>(false);
const loading = ref(true);

const loadData = async () => {

  let userListData;
  loading.value=true;
  // 心动模式
  if (isMatchMode.value) {
    const num = 10;
    userListData = await myAxios.get('user/match', {
      params: {
        num,
      }
    }).then(function (response) {
      console.log('/user/match succeed', response);
      // showSuccessToast("搜索成功");
      return response?.data;
    }).catch(function (error) {
      console.log('/user/match failed', error);
      showFailToast("搜索失败");
    });

  }else{
    // 普通模式使用分页查询
    userListData = await myAxios.get('/user/recommend', {
      params: {
        pageSize: 8,
        pageNum: 1
      }
    }).then(function (response) {
      console.log('/user/recommend succeed', response);
      // showSuccessToast("搜索成功");
      return response?.data?.records;

    }).catch(function (error) {
      console.log('/user/recommend failed', error);
      showFailToast("搜索失败");
    });
  }

  if (userListData) {
    userListData.forEach((user:UserType)=>{
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
}



watchEffect(()=>{
  loadData();
})

/**
 * 解释一下为什么去掉 async/await 会导致无法使用 forEach 的错误：
 * 当你使用 await 时这里 userListData 是 then 回调函数返回的数据（即 response?.data），它是一个数组，因此可以使用 forEach 方法。
 * 但如果你去掉 async/await：
 * 这时 userListData 实际上是一个 Promise 对象，而不是 then 回调中返回的数据。Promise 对象没有 forEach 方法，
 * 所以当你尝试调用 userListData.forEach() 时就会报错："userListData.forEach is not a function"。
 */

// onMounted(async () => {
//   // 为给定ID的user创建请求
//   // 等待await里面所有的内容都执行完毕之后，再把值赋给userListData,然后下面的判断再进行，如果不加await，则会出现错误。
//   const userListData = await myAxios.get('/user/recommend', {
//     // 这里需要去除掉withCredentials,否则后端会返回无权限
//     // withCredentials: false,
//
//     // 分页查询需要的参数
//     params: {
//       pageSize: 8,
//       pageNum: 1
//     },
//   })
//       .then(function (response) {
//         if (response.code == 0) {
//           console.log('/user/recommend succeed', response);
//
//           showSuccessToast("搜索成功");
//           // 后端的mybatis plus插件返回的信息在records中
//           return response?.data?.records;
//           // return response?.data;
//
//         } else {
//           showFailToast(response.message);
//         }
//
//
//       })
//       .catch(function (error) {
//         console.log('/user/recommend failed', error);
//         showFailToast("搜索失败");
//       });
//   if (userListData) {
//     // 这里循环遍历，将tags字段转为json对象,防止前端展示标签的时候每个字符都分割
//     userListData.forEach(user => {
//       if (user.tags) {
//         user.tags = JSON.parse(user.tags);
//       }
//     })
//     userList.value = userListData;
//   }
// })


</script>

<template>
  <!--  标签搜索获取的结果商品卡片展示 -->
  <!--  <van-card-->
  <!--      v-for="user in userList"-->
  <!--      :desc="user.profile"-->
  <!--      :title="`${user.username} (${user.planetCode})`"-->
  <!--      :thumb="user.avatarUrl"-->
  <!--  >-->
  <!--    <template #tags>-->
  <!--      &lt;!&ndash;      &lt;!&ndash;      这个是获取模拟数据的标签 &ndash;&gt;&ndash;&gt;-->
  <!--      &lt;!&ndash;      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">&ndash;&gt;-->
  <!--      &lt;!&ndash;      获取路由传递过来的标签 &ndash;&gt;-->
  <!--      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">-->
  <!--        {{ tag }}-->
  <!--      </van-tag>-->
  <!--    </template>-->
  <!--    <template #footer>-->
  <!--      <van-button size="mini">联系我</van-button>-->
  <!--    </template>-->
  <!--  </van-card>-->


  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" />
    </template>
  </van-cell>


  <!-- 展示组件抽离出单独的 -->
  <!--    user-list和userList都可以，都识别-->
  <user-card-list :user-list="userList" :loading="loading"></user-card-list>

  <!--  增添搜素标签结果为空的页面展示 -->
  <van-empty v-if="!userList || userList.length < 1" description="数据为空"/>

</template>

<style scoped>

</style>